<script setup lang="ts">
import {useAttrs} from "vue";

const attrs = useAttrs()
const props = defineProps({
  modelValue:{

  },
  showType: {
    default: 'select',
  },
  showTag: {
    default: false
  }
})
const emits= defineEmits(['update:modelValue'])
const selected = ref('公')
const handInputChange=()=> {
  emits('update:modelValue',selected.value)
}
const init = ()=> {
  if (props.modelValue) {
    selected.value = props.modelValue
  }
  if (!props.modelValue) {
    emits('update:modelValue',selected.value)
  }
}
watch(()=>props.modelValue,()=> {
  init()
}, {immediate: true})


const options = ref([
  {
    label: '公',
    value: '公'
  },
  {
    label: '母',
    value: '母'
  }
])
const prop = ref({
  emitPath: false,
  checkStrictly: true
})
</script>

<template>
  <template  v-bind="attrs" v-if="showTag != undefined && showTag != false">
    <el-tag type="success" v-if="modelValue == 0">是</el-tag>
    <el-tag type="danger" v-else>否</el-tag>
  </template>
  <el-radio-group  v-bind="attrs" v-else-if="showType == 'radio'" v-model="selected" @change="handInputChange">
    <el-radio value="公" size="large">公</el-radio>
    <el-radio value="母" size="large">母</el-radio>
  </el-radio-group>

  <ElCascader style="width: 100%;"  v-bind="attrs" v-else v-model="selected" @change="handInputChange" :options="options" :prop="prop"/>

</template>

<style scoped lang="scss">

</style>
